<!--
Copyright 2020 The Chromium Authors. All rights reserved.
Use of this source code is governed by a BSD-style license that can be
found in the LICENSE file.
-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Debug</title>
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <script type="module" src="/out/Default/resources/inspector_overlay/main.js"></script>
</head>
<body>
  <script type="module">
    const viewportWidth = document.documentElement.clientWidth;
    const viewportHeight = document.documentElement.clientHeight;

    const gridInfos = [
      // Simple 2x3 grid, with explicit lines.
      {
        "gridInfo":
          {
            "rows":["M",100,60,"L",420,60,"M",420,127,"L",100,127,"M",100,137,"L",420,137,"M",420,204,"L",100,204],
            "rowGaps":["M",100,127,"L",420,127,"L",420,137,"L",100,137,"Z"],
            "positiveRowLineNumberOffsets":[0,72,144],
            "negativeRowLineNumberOffsets":[0,72,144],
            "columns":["M",100,60,"L",100,204,"M",200,204,"L",200,60,"M",210,60,"L",210,204,"M",310,204,"L",310,60,"M",320,60,"L",320,204,"M",420,204,"L",420,60],
            "columnGaps":["M",200,60,"L",210,60,"L",210,204,"L",200,204,"Z","M",310,60,"L",320,60,"L",320,204,"L",310,204,"Z"],
            "positiveColumnLineNumberOffsets":[0,105,215,320],
            "negativeColumnLineNumberOffsets":[0,105,215,320],
            "gridBorder":["M",100,60,"L",420,60,"L",420,204,"L",100,204,"Z"],
            "gridHighlightConfig":{"gridBorderDash":false,"rowLineDash":true,"columnLineDash":true,"showGridExtensionLines":true,"showPositiveLineNumbers":true,"showNegativeLineNumbers":true,"rowLineColor":"rgba(127, 32, 210, 1)","columnLineColor":"rgba(127, 32, 210, 1)","rowHatchColor":"rgba(127, 32, 210, .8)","columnHatchColor":"rgba(127, 32, 210, .8)","gridBorderColor":"rgba(127, 32, 210, 1)"},
            "isPrimaryGrid":true,
            "nodeId": 1
          }
      },
      // 3x3 grid with a leading implicit row and a leading implicit column.
      {
        "gridInfo":
          {
            "rows":["M",200,400,"L",800,400,"M",800,495,"L",200,495,"M",200,505,"L",800,505,"M",800,595,"L",200,595,"M",200,605,"L",800,605,"M",800,695,"L",200,695,"M",200,705,"L",800,705,"M",800,800,"L",200,800],
            "rowGaps":["M",200,495,"L",800,495,"L",800,505,"L",200,505,"Z","M",200,595,"L",800,595,"L",800,605,"L",200,605,"Z","M",200,695,"L",800,695,"L",800,705,"L",200,705,"Z"],
            "positiveRowLineNumberOffsets":[100,200,300,400],
            "negativeRowLineNumberOffsets":[0,100,200,300],
            "columns":["M",200,400,"L",200,800,"M",400,800,"L",400,400,"M",600,800,"L",600,400,"M",800,800,"L",800,400],
            "columnGaps":[],
            "positiveColumnLineNumberOffsets":[200,400,600],
            "negativeColumnLineNumberOffsets":[0,200,400],
            "gridBorder":["M",200,400,"L",800,400,"L",800,800,"L",200,800,"Z"],
            "gridHighlightConfig":{"gridBorderDash":false,"rowLineDash":true,"columnLineDash":true,"showGridExtensionLines":true,"showPositiveLineNumbers":true,"showNegativeLineNumbers":true,"rowLineColor":"rgba(127, 32, 210, 1)","columnLineColor":"rgba(127, 32, 210, 1)","rowHatchColor":"rgba(127, 32, 210, .8)","columnHatchColor":"rgba(127, 32, 210, .8)"},
            "isPrimaryGrid":true,
            "nodeId": 2
          },
      },
      // 1x1 full-page grid to test when labels are inside the grid
      {
        "gridInfo":
          {
            "rows":["M",0,0,"L",viewportWidth,0,"M",viewportWidth,viewportHeight,"L",0,viewportHeight],
            "positiveRowLineNumberOffsets":[0,viewportHeight],
            "negativeRowLineNumberOffsets":[0,viewportHeight],
            "columns":["M",0,0,"L",0,viewportHeight,"M",viewportWidth,viewportHeight,"L",viewportWidth,0],
            "positiveColumnLineNumberOffsets":[0,viewportWidth],
            "negativeColumnLineNumberOffsets":[0,viewportWidth],
            "gridBorder":["M",0,0,"L",viewportWidth,0,"L",viewportWidth,viewportHeight,"L",0,viewportHeight,"Z"],
            "gridHighlightConfig":{"gridBorderDash":false,"rowLineDash":true,"columnLineDash":true,"showGridExtensionLines":true,"showPositiveLineNumbers":true,"showNegativeLineNumbers":true,"rowLineColor":"rgba(127, 32, 210, 1)","columnLineColor":"rgba(127, 32, 210, 1)"},
            "isPrimaryGrid":true,
            "nodeId": 3
          }
      },
      // // 10x10 grid with narrow tracks to test when labels are close to each other
      {
        "gridInfo":
          {
            "rows":["M",600,100,"L",700,100,"M",700,110,"L",600,110,"M",600,120,"L",700,120,"M",700,130,"L",600,130,"M",600,140,"L",700,140,"M",700,150,"L",600,150,"M",600,160,"L",700,160,"M",700,170,"L",600,170,"M",600,180,"L",700,180,"M",700,190,"L",600,190,"M",600,200,"L",700,200],
            "rowGaps":[],
            "positiveRowLineNumberOffsets":[0,10, 20, 30, 40, 50, 60, 70, 80, 90, 100],
            "negativeRowLineNumberOffsets":[0,10, 20, 30, 40, 50, 60, 70, 80, 90, 100],
            "columns":["M",600,100,"L",600,200,"M",610,200,"L",610,100,"M",620,100,"L",620,200,"M",630,200,"L",630,100,"M",640,100,"L",640,200,"M",650,200,"L",650,100,"M",660,100,"L",660,200,"M",670,200,"L",670,100,"M",680,100,"L",680,200,"M",690,200,"L",690,100,"M",700,100,"L",700,200],
            "columnGaps":[],
            "positiveColumnLineNumberOffsets":[0,10, 20, 30, 40, 50, 60, 70, 80, 90, 100],
            "negativeColumnLineNumberOffsets":[0,10, 20, 30, 40, 50, 60, 70, 80, 90, 100],
            "gridBorder":["M",600,100,"L",700,100,"L",700,200,"L",600,200,"Z"],
            "gridHighlightConfig":{"gridBorderDash":false,"rowLineDash":true,"columnLineDash":true,"showGridExtensionLines":true,"showPositiveLineNumbers":true,"showNegativeLineNumbers":true,"rowLineColor":"rgba(127, 32, 210, 1)","columnLineColor":"rgba(127, 32, 210, 1)"},
            "isPrimaryGrid":true,
            "nodeId": 4
          }
      },
      // Grid with sub-pixel paths.
      {
        "gridInfo":
          {
            "rows":["M",543.4285888671875,263.00006103515625,"L",639.4285888671875,263.00006103515625,"M",543.4285888671875,271.00006103515625,"L",639.4285888671875,271.00006103515625,"M",543.4285888671875,279.00006103515625,"L",639.4285888671875,279.00006103515625,"M",543.4285888671875,287.00006103515625,"L",639.4285888671875,287.00006103515625,"M",543.4285888671875,295.00006103515625,"L",639.4285888671875,295.00006103515625,"M",543.4285888671875,303.00006103515625,"L",639.4285888671875,303.00006103515625,"M",543.4285888671875,311.00006103515625,"L",639.4285888671875,311.00006103515625,"M",543.4285888671875,319.00006103515625,"L",639.4285888671875,319.00006103515625,"M",543.4285888671875,327.00006103515625,"L",639.4285888671875,327.00006103515625,"M",543.4285888671875,335.00006103515625,"L",639.4285888671875,335.00006103515625,"M",543.4285888671875,343.00006103515625,"L",639.4285888671875,343.00006103515625,"M",543.4285888671875,351.00006103515625,"L",639.4285888671875,351.00006103515625,"M",639.4285888671875,359.00006103515625,"L",543.4285888671875,359.00006103515625],
            "rowGaps":[],
            "columns":["M",543.4285888671875,263.00006103515625,"L",543.4285888671875,359.00006103515625,"M",551.4285888671875,263.00006103515625,"L",551.4285888671875,359.00006103515625,"M",559.4285888671875,263.00006103515625,"L",559.4285888671875,359.00006103515625,"M",567.4285888671875,263.00006103515625,"L",567.4285888671875,359.00006103515625,"M",575.4285888671875,263.00006103515625,"L",575.4285888671875,359.00006103515625,"M",583.4285888671875,263.00006103515625,"L",583.4285888671875,359.00006103515625,"M",591.4285888671875,263.00006103515625,"L",591.4285888671875,359.00006103515625,"M",599.4285888671875,263.00006103515625,"L",599.4285888671875,359.00006103515625,"M",607.4285888671875,263.00006103515625,"L",607.4285888671875,359.00006103515625,"M",615.4285888671875,263.00006103515625,"L",615.4285888671875,359.00006103515625,"M",623.4285888671875,263.00006103515625,"L",623.4285888671875,359.00006103515625,"M",631.4285888671875,263.00006103515625,"L",631.4285888671875,359.00006103515625,"M",639.4285888671875,359.00006103515625,"L",639.4285888671875,263.00006103515625],
            "columnGaps":[],
            "positiveRowLineNumberOffsets":[0,8,16,24.000001907348633,32,40,48.000003814697266,56.000003814697266,64,72,80,88.00000762939453,96.00000762939453],
            "positiveColumnLineNumberOffsets":[0,8,16,24.000001907348633,32,40,48.000003814697266,56.000003814697266,64,72,80,88.00000762939453,96.00000762939453],
            "negativeRowLineNumberOffsets":[0,8,16,24.000001907348633,32,40,48.000003814697266,56.000003814697266,64,72,80,88.00000762939453,96.00000762939453],
            "negativeColumnLineNumberOffsets":[0,8,16,24.000001907348633,32,40,48.000003814697266,56.000003814697266,64,72,80,88.00000762939453,96.00000762939453],
            "gridBorder":["M",543.4285888671875,263.00006103515625,"L",639.4285888671875,263.00006103515625,"L",639.4285888671875,359.00006103515625,"L",543.4285888671875,359.00006103515625,"Z"],
            "gridHighlightConfig":{"gridBorderDash":false,"rowLineDash":true,"columnLineDash":true,"showGridExtensionLines":true,"showPositiveLineNumbers":true,"showNegativeLineNumbers":true,"rowLineColor":"rgba(255, 0, 0, 1)","columnLineColor":"rgba(255, 0, 0, 1)"},
            "isPrimaryGrid":true,
            "nodeId": 5
          }
      }
    ];

    dispatch(["setPlatform", "mac"]);
    dispatch(["setOverlay", "persistent"]);
    dispatch(["reset", {
      viewportSize: {
        width: viewportWidth,
        height: viewportHeight,
      },
      deviceScaleFactor: 1,
      pageScaleFactor: 1,
      pageZoomFactor: 1,
      emulationScaleFactor: 1,
      scrollX: 0,
      scrollY: 0,
    }]);

    for (const {gridInfo} of gridInfos) {
      dispatch(["drawGridHighlight", gridInfo]);
    }
  </script>
</body>
</html>
